<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哈三天眼监控</title>
  <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      overflow: hidden;
    }

    .monitor-container {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      margin: 10px;
      overflow: hidden;
    }

    .header {
      background: linear-gradient(90deg, #2c3e50, #34495e);
      color: white;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 3px solid #3498db;
    }

    .header h1 {
      font-size: 24px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .status-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #27ae60;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .main-content {
      flex: 1;
      display: flex;
      padding: 20px;
      gap: 20px;
    }

    .video-section {
      flex: 2;
      display: flex;
      flex-direction: column;
    }

    .video-container {
      background: #000;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    #videoElement {
      width: 100%;
      height: 100%;
      min-height: 400px;
      object-fit: cover;
    }

    .video-overlay {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 12px;
    }

    .control-panel {
      margin-top: 15px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .control-btn {
      background: linear-gradient(45deg, #3498db, #2980b9);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .control-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .control-btn.danger {
      background: linear-gradient(45deg, #e74c3c, #c0392b);
    }

    .control-btn.success {
      background: linear-gradient(45deg, #27ae60, #229954);
    }

    .info-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .info-card {
      background: white;
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-left: 4px solid #3498db;
    }

    .info-card h3 {
      color: #2c3e50;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .info-label {
      color: #7f8c8d;
      font-weight: 500;
    }

    .info-value {
      color: #2c3e50;
      font-weight: bold;
    }

    .log-section {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 15px;
      border-radius: 10px;
      max-height: 200px;
      overflow-y: auto;
    }

    .log-section h3 {
      margin-bottom: 10px;
      color: #3498db;
    }

    .log-entry {
      font-size: 12px;
      margin-bottom: 5px;
      padding: 5px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
    }

    .timestamp {
      color: #95a5a6;
      font-size: 11px;
    }

    .footer {
      background: #34495e;
      color: white;
      padding: 10px 20px;
      text-align: center;
      font-size: 12px;
    }

    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      color: #7f8c8d;
    }

    .spinner {
      border: 3px solid #f3f3f3;
      border-top: 3px solid #3498db;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
      margin-right: 10px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
      
      .header h1 {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <div class="monitor-container">
    <!-- 头部 -->
    <div class="header">
      <h1>🔴 哈三-场地南侧监控</h1>
      <div class="status-indicator">
        <div class="status-dot"></div>
        <span class="status-text">实时监控中</span>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 视频区域 -->
      <div class="video-section">
        <div class="video-container">
          <video id="videoElement" controls></video>
          <div class="video-overlay">LIVE</div>
        </div>
        
        <!-- 控制面板 -->
        <div class="control-panel">
          <button class="control-btn" onclick="toggleFullscreen()">全屏</button>
          <button class="control-btn" onclick="refreshStream()">刷新</button>
          <button class="control-btn success" onclick="startStream()">开始</button>
          <button class="control-btn danger" onclick="stopStream()">停止</button>
          <button class="control-btn" onclick="takeSnapshot()">截图</button>
        </div>
      </div>

      <!-- 信息面板 -->
      <div class="info-section">
        <!-- 监控信息 -->
        <div class="info-card">
          <h3>📊 监控信息</h3>
          <div class="info-item">
            <span class="info-label">摄像头编号:</span>
            <span class="info-value">CAM-1064</span>
          </div>
          <div class="info-item">
            <span class="info-label">位置:</span>
            <span class="info-value">场地南侧</span>
          </div>
          <div class="info-item">
            <span class="info-label">分辨率:</span>
            <span class="info-value">1920x1080</span>
          </div>
          <div class="info-item">
            <span class="info-label">帧率:</span>
            <span class="info-value">25 FPS</span>
          </div>
          <div class="info-item">
            <span class="info-label">连接状态:</span>
            <span class="info-value" id="connectionStatus">连接中...</span>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="info-card">
          <h3>⚙️ 系统状态</h3>
          <div class="info-item">
            <span class="info-label">CPU使用率:</span>
            <span class="info-value" id="cpuUsage">--</span>
          </div>
          <div class="info-item">
            <span class="info-label">内存使用:</span>
            <span class="info-value" id="memoryUsage">--</span>
          </div>
          <div class="info-item">
            <span class="info-label">网络延迟:</span>
            <span class="info-value" id="networkLatency">--</span>
          </div>
          <div class="info-item">
            <span class="info-label">在线时长:</span>
            <span class="info-value" id="uptime">--</span>
          </div>
        </div>

        <!-- 日志区域 -->
        <div class="log-section">
          <h3>📝 系统日志</h3>
          <div id="logContainer">
            <div class="log-entry">
              <span class="timestamp">[2024-01-15 14:30:25]</span> 监控系统启动
            </div>
            <div class="log-entry">
              <span class="timestamp">[2024-01-15 14:30:26]</span> 连接摄像头成功
            </div>
            <div class="log-entry">
              <span class="timestamp">[2024-01-15 14:30:27]</span> 开始实时监控
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <span>© 2024 哈三监控系统 | 技术支持: AI Assistant</span>
    </div>
  </div>

  <script>
    let flvPlayer = null;
    let startTime = new Date();
    let isStreaming = false;

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      updateSystemInfo();
      setInterval(updateSystemInfo, 5000); // 每5秒更新系统信息
    });

    // 初始化播放器
    function initPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'ws://localhost:8866/live?url=rtsp://0vpreview:e018d418@59.80.55.116:10554/1064:12:0:0.sdp',
          //url: 'wss://tums.chdgc.com.cn/vms/jessica/hdhshd/1068.flv',
        });
        
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();

        // 监听播放器事件
        flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {
          updateConnectionStatus('已连接', '#27ae60');
          addLog('视频流加载完成');
        });

        flvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail) {
          updateConnectionStatus('连接错误', '#e74c3c');
          addLog('视频流连接错误: ' + errorDetail);
        });

      } else {
        updateConnectionStatus('不支持', '#e74c3c');
        addLog('浏览器不支持FLV播放');
      }
    }

    // 更新连接状态
    function updateConnectionStatus(status, color) {
      const statusElement = document.getElementById('connectionStatus');
      statusElement.textContent = status;
      statusElement.style.color = color;
    }

    // 更新系统信息
    function updateSystemInfo() {
      // 模拟系统信息更新
      document.getElementById('cpuUsage').textContent = Math.floor(Math.random() * 30 + 10) + '%';
      document.getElementById('memoryUsage').textContent = Math.floor(Math.random() * 20 + 60) + '%';
      document.getElementById('networkLatency').textContent = Math.floor(Math.random() * 50 + 10) + 'ms';
      
      // 计算在线时长
      const now = new Date();
      const diff = now - startTime;
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      document.getElementById('uptime').textContent = `${hours}小时${minutes}分钟`;
    }

    // 添加日志
    function addLog(message) {
      const logContainer = document.getElementById('logContainer');
      const timestamp = new Date().toLocaleString();
      const logEntry = document.createElement('div');
      logEntry.className = 'log-entry';
      logEntry.innerHTML = `<span class="timestamp">[${timestamp}]</span> ${message}`;
      
      logContainer.appendChild(logEntry);
      
      // 保持最多10条日志
      if (logContainer.children.length > 10) {
        logContainer.removeChild(logContainer.firstChild);
      }
      
      // 自动滚动到底部
      logContainer.scrollTop = logContainer.scrollHeight;
    }

    // 控制功能
    function toggleFullscreen() {
      const video = document.getElementById('videoElement');
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      }
      addLog('切换全屏模式');
    }

    function refreshStream() {
      if (flvPlayer) {
        flvPlayer.unload();
        flvPlayer.load();
        flvPlayer.play();
        addLog('刷新视频流');
      }
    }

    function startStream() {
      if (!isStreaming) {
        isStreaming = true;
        initPlayer();
        addLog('开始视频流');
      }
    }

    function stopStream() {
      if (flvPlayer) {
        flvPlayer.pause();
        isStreaming = false;
        addLog('停止视频流');
      }
    }

    function takeSnapshot() {
      const video = document.getElementById('videoElement');
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0);
      
      // 创建下载链接
      const link = document.createElement('a');
      link.download = `snapshot_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.png`;
      link.href = canvas.toDataURL();
      link.click();
      
      addLog('截图已保存');
    }

    // 页面卸载时清理资源
    window.addEventListener('beforeunload', function() {
      if (flvPlayer) {
        flvPlayer.destroy();
      }
    });
  </script>
</body>
</html> 